<template>
  <div class="info-wrap">
    <Title title="更多上刊信息" style="font-size:16px; margin:32px 0 8px 0"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col v-for="field in noConfirmFields" :span="8" :key="field.keyword" :class="{'label-collapse-global': field.labelCollapse}">
          <el-form-item :label="`${field.label}：`" style="margin-bottom: 0px;">
            <ToolTip
              v-if="field.type === 'number'"
              :content="getData(field) | numberTextFormat(2)"
              :tool-tip="getData(field) | moneyFilter" />
            <ToolTip v-else :content="getData(field)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="field in confirmFields" :key="field.keyword" :gutter="20" class="mt12">
        <el-col v-for="child in field.children" :span="8" :key="child.keyword">
          <div v-if="child.type==='switch'" class="flex-center switch-class">
            <el-checkbox
              v-if="detailInfo[field.parentKey] && detailInfo[field.parentKey][field.keyword]"
              v-model="detailInfo[field.parentKey][field.keyword][child.keyword]"
              disabled />
            <el-checkbox v-else :value="false" disabled />
            <span class="label">{{ child.label }}</span>
          </div>
          <el-form-item v-else-if="handleFieldShow(field, child)" :label="`${child.label}：`" style="margin-bottom: 0px;">
            <ToolTip
              v-if="child.type === 'number'"
              :content="getConfirmData(field, child) | numberTextFormat(2)"
              :tool-tip="getConfirmData(field, child) | moneyFilter" />
            <ToolTip v-else :content="getConfirmData(field, child)" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { voiceAnchorFilter, frameOutFilter, recommendRankFilter } from '@/utils/const/resouce';
import { numberTextFormat, moneyFilter } from '@/filters/number';

export default {
  components: {
    Title
  },
  filters: { numberTextFormat, moneyFilter },
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    noConfirmFields() {
      const fields = this.fields || [];
      return fields.filter(i => {
        return i.type !== 'confirm';
      });
    },
    confirmFields() {
      const fields = this.fields || [];
      return fields.filter(i => {
        return i.type === 'confirm';
      });
    },
    fields() {
      // 平台，1:微信 2: 微博 3:小红书 4.抖音 5:更多  6:直播 7:B站
      const platformCategory = this.detailInfo.accountInfo.platformCategory;
      const fields = [
        { label: '是否露脸', keyword: 'isOnCamera', parentKey: 'moreInfo', type: 'select', platformCategory: [3], filterFn: frameOutFilter },
        { label: '是否口播', keyword: 'isVoiceAnchor', parentKey: 'moreInfo', type: 'select', platformCategory: [3], filterFn: voiceAnchorFilter },
        { label: '达人配合度/性格', keyword: 'masterFit', parentKey: 'moreInfo', type: 'input', platformCategory: [3], labelCollapse: true },
        { label: '接单诉求', keyword: 'orderRequest', parentKey: 'moreInfo', type: 'input', platformCategory: [3] },
        { label: '推荐优先级', keyword: 'recommendRank', parentKey: 'moreInfo', type: 'select', platformCategory: [2, 3, 4, 7], filterFn: recommendRankFilter },
        {
          keyword: 'freeAuth',
          children: [
            { label: '可全平台免费授权6个月信息流/电商投放以及二次剪辑', keyword: 'isConfirm', type: 'switch' },
            { label: '备注', keyword: 'cost', type: 'number' }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [2, 3, 4, 7] },
        {
          keyword: 'otherFreePlatform',
          children: [
            { label: '可免费同步其他平台', keyword: 'isConfirm', type: 'switch' },
            { label: '备注', keyword: 'cost', type: 'number' }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [2, 3, 4, 7] },
        {
          keyword: 'hasShopPrice',
          children: [
            { label: '可免费同城探店', keyword: 'isConfirm', type: 'switch' },
            { label: '备注', keyword: 'cost', type: 'number' }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [2, 3, 4, 7]
        },
        {
          keyword: 'retentionAllowed',
          children: [
            { label: '可永久保留内容', keyword: 'isConfirm', type: 'switch', linkKey: 'timeLimit' },
            { label: '备注', keyword: 'timeLimit', type: 'input', labelCollapse: true }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [3]
        },
        {
          keyword: 'addBrand',
          children: [
            { label: '可免费添加品牌标记组件，评论区组件等', keyword: 'isConfirm', type: 'switch' },
            { label: '备注', keyword: 'cost', type: 'number' }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [3]
        },
        {
          keyword: 'allowCar',
          children: [
            { label: '可免费挂车', keyword: 'isConfirm', type: 'switch', linkKey: 'timeLimit' },
            { label: '备注', keyword: 'cost', type: 'number' }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [4]
        },
        {
          keyword: 'carCommission',
          children: [
            { label: '对挂车佣金无要求', keyword: 'isConfirm', type: 'switch' },
            { label: '备注', keyword: 'cost', type: 'number' }
          ],
          parentKey: 'moreInfo', type: 'confirm', platformCategory: [4]
        }
      ];
      return fields.filter(i => {
        return !i.platformCategory || i.platformCategory.includes(platformCategory);
      });
    }
  },
  methods: {
    getData(field) {
      const value = this.detailInfo[field.parentKey] ? this.detailInfo[field.parentKey][field.keyword] : '';
      return field.filterFn ? field.filterFn(value) : value;
    },
    handleFieldShow(field) {
      return !this.detailInfo[field.parentKey][field.keyword].isConfirm;
    },
    getConfirmData(field, child) {
      if (!this.detailInfo[field.parentKey][field.keyword]) return '';
      const parentValue = this.detailInfo[field.parentKey][field.keyword];
      const value = this.handleFieldShow(field, child) ? parentValue[child.keyword] : '';
      return field.filterFn ? field.filterFn(value) : value;
    }
  }
};
</script>
<style lang="scss">
.switch-class {
  height: 32px;
  margin:0 0 12px 50px;
  .label {
    margin-left: 12px;
  }
}
</style>
